<template>
  <el-dialog title="分配线索" :visible.sync="open">
    <el-tag>
      你选择了{{ids.length}}个线索
    </el-tag>
    <el-form :model="form" ref="form" :rules="rules">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-form-item label="部门" prop="deptId">
            <treeselect v-model="form.deptId"
                        :options="deptOptions"
                        :show-count="true"
                        :disable-branch-nodes="true"
                        placeholder="请选择部门"
                        @input="changeDept"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择用户">
              <el-option v-for="item in deptUserOptions" :label="item.nickName" :value="item.userId" :key="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { addAssignRecord } from "@/api/crm/assignRecord"

export default {
  name: "assign",
  components: { Treeselect },
  data(){
    return{
      // id:null,
      ids:[],
      open:false,
      form:{
        userId:null,
        deptId:null,
      },
      deptOptions:[],
      deptUserOptions:[],
      rules:{
        userId: [{required:true,message:'用户不能为空',trigger:'blue'}],
        deptId: [{required:true,message:'部门不能为空',trigger:'blue'}]
      }
    }
  },
  created(){
    this.getDeptTree();
  },
  methods:{
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    changeDept(val){
      this.form.userId=null;
      if(val){
        listUser({deptId:val}).then(resp =>{
          this.deptUserOptions = resp.rows;
        })
      }else {
        this.deptUserOptions=[]
      }
    },
    submitForm(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.open=false
          // this.form.id=this.ids
          // let assignRecordList = this.idsToList();
          addAssignRecord(this.idsToList()).then(resp => {
            if(resp.code == 200){
              this.$modal.msgSuccess('分配成功')
              this.open=false
              this.$emit('ok')
            }
          })
        }
      })
    },
    resertForm(){
      this.form = {
        deptId: null,
        userId: null,
      }
    },
    idsToList(){
      let list =[];
      let userName = this.deptUserOptions.find(item => item.userId == this.form.userId).userName;
      for(let id of this.ids){
        let item ={
            assignId: id,
            type: 'CLUE',
            userId: this.form.userId,
            userName: userName,
            deptId: this.form.deptId,
          }
          list.push(item)
      }
      return list;
    }
  }
}
</script>

<style scoped>

</style>

